<style lang="less" scope>
    .file-view {
        position: relative;
        // cursor: pointer;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        background-color: #fafafa;
        position: relative;
        text-align: center;

        .file-view-img {
            width: 100%;
            height: 100%;
        }

        .other-icon,
        .file-view-video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .other-icon {
            font-size: 48px;
        }
    }
</style>
<template>
    <div class="file-view" v-viewer="{url:'source'}">
        <img v-if="isImage" class="file-view-img" :src="vSrc" ref="img" :source="src"/>
        <div v-else-if="isVideo" ref="video" class="file-view-video"></div>
        <a-icon v-else :type="iconType" class="other-icon" />
    </div>
</template>
<script>
    import { testFileType } from '../service/zsFiles';
    import Player from "xgplayer";
    export default {
        name: 'FileView',
        props: {
            src: {
                type: String
            }
        },
        data() {
            return {
                loading: false,
                // 视频播放器
                player: null,
                vSrc: null
            }
        },
        computed: {
            iconType() {
                const typeRes = testFileType(this.src);
                if (typeRes.isTxt) return 'file-text';
                if (typeRes.isExcel) return 'file-excel';
                if (typeRes.isPDF) return 'file-pdf';
                if (typeRes.isPPT) return 'file-ppt';
                if (typeRes.isWord) return 'file-word';
                return 'file';
            },
            typeRes() {
                return testFileType(this.src);
            },
            isImage() {
                return this.typeRes.isImage;
            },
            isVideo() {
                return this.typeRes.isVideo && this.typeRes.canPlay;
            }
        },
        watch: {
            src(newVal, oldVal) {
                if (!newVal) return;
                if (newVal == oldVal) return;
                this.$nextTick(() => {
                    if (this.isVideo) {
                        this.initVideo();
                    }
                    if (this.isImage) {
                        this.initImg();
                    }
                });
            }
        },
        created(){
            this.vSrc = this.src;
            this.$nextTick(() => {
                if (this.isVideo) {
                    this.initVideo();
                }
                if (this.isImage) {
                    this.initImg();
                }
            });
        },
        methods: {
            initImg() {
                const dom = this.$refs.img;
                const width = dom.clientWidth;
                const height = dom.clientHeight;
                if (this.src.indexOf('.aliyuncs.com') > -1) {
                    // 阿里云
                    this.vSrc = addImgProcess(this.src,`image/resize,m_fill,h_${height},w_${width}`);
                    return
                }
                this.vSrc = this.src;
            },
            initVideo() {
                this.vSrc = this.src;
                if (this.player) {
                    this.player.src = this.vSrc;
                    return;
                }
                const { src } = this;
                const player = new Player({
                    el: this.$refs.video,
                    url: this.vSrc,
                    fluid: true,
                    volume: 0.6,
                    closeInactive: true,
                    autoplay: false
                });
                this.player = player;
            }
        }
    };

    function addImgProcess(url,processStr) {
        if (url.indexOf('x-oss-process=')>-1) return url;
        return `${url}${url.indexOf('?')>-1?'&':'?'}x-oss-process=${processStr}`;
    }
</script>